<template>
	<view class="login-container">
		<!-- 背景装饰 -->
		<view class="background-decoration"></view>
		
		<!-- 登录卡片 -->
		<view class="login-card">
			<!-- Logo和标题 -->
			<view class="login-header">
				<view class="logo-container">
					<text class="logo-icon">🌱</text>
				</view>
				<text class="app-title">闪联智圃</text>
				<text class="app-subtitle">用户登录</text>
			</view>
			
			<!-- 登录表单 -->
			<view class="login-form">
				<!-- 用户名输入 -->
				<view class="input-group">
					<view class="input-icon">👤</view>
					<input 
						class="form-input" 
						v-model="username" 
						placeholder="请输入用户名" 
						type="text"
						maxlength="20"
						@input="clearError"
					/>
				</view>
				
				<!-- 密码输入 -->
				<view class="input-group">
					<view class="input-icon">🔒</view>
					<input 
						class="form-input" 
						v-model="password" 
						placeholder="请输入密码" 
						:password="!showPassword"
						maxlength="20"
						@input="clearError"
					/>
					<view class="password-toggle" @click="togglePassword">
						<text class="toggle-icon">{{ showPassword ? '🙈' : '👁️' }}</text>
					</view>
				</view>
				
				<!-- 角色选择 -->
				<view class="input-group">
					<view class="input-icon">👥</view>
					<picker 
						class="role-picker" 
						:value="roleIndex" 
						:range="roles" 
						range-key="label" 
						@change="onRoleChange"
					>
						<view class="picker-display">
							<text class="picker-text">{{ roles[roleIndex].label }}</text>
							<text class="picker-arrow">▼</text>
						</view>
					</picker>
				</view>
				
				<!-- 错误提示 -->
				<view v-if="errorMessage" class="error-message">
					<text class="error-icon">⚠️</text>
					<text class="error-text">{{ errorMessage }}</text>
				</view>
				
				<!-- 登录按钮 -->
				<button 
					class="login-btn" 
					:class="{ 'loading': isLoading }"
					@click="handleLogin"
					:disabled="isLoading"
				>
					<text v-if="!isLoading" class="btn-text">登录</text>
					<text v-else class="btn-text">登录中...</text>
				</button>
				
				<!-- 注册链接 -->
				<view class="register-link" @click="goToRegister">
					<text class="link-text">还没有账户？点击注册</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			username: '',
			password: '',
			roleIndex: 0,
			roles: [
				{ value: 'user', label: '普通用户' },
				{ value: 'admin', label: '管理员' }
			],
			showPassword: false,
			errorMessage: '',
			isLoading: false,
			// 环境参数阈值设置
			showThresholdSettings: false,
			thresholds: {
				temperature: {
					min: 18,
					max: 28,
					unit: '°C'
				},
				humidity: {
					min: 40,
					max: 70,
					unit: '%'
				},
				light: {
					min: 200,
					max: 800,
					unit: 'lux'
				},
				rain: {
					min: 0,
					max: 50,
					unit: 'mm'
				}
			}
		}
	},
	
	onLoad() {
		// 检查是否已经登录
		const token = uni.getStorageSync('userToken');
		const userInfo = uni.getStorageSync('userInfo');
		
		if (token && userInfo) {
			// 已登录，跳转到首页
			uni.reLaunch({
				url: '/pages/index/index'
			});
		}
	},
	
	methods: {
		// 切换密码显示状态
		togglePassword() {
			this.showPassword = !this.showPassword;
		},
		
		// 角色选择改变
		onRoleChange(e) {
			this.roleIndex = e.detail.value;
			this.clearError();
		},
		
		// 清除错误信息
		clearError() {
			this.errorMessage = '';
		},
		
		// 表单验证
		validateForm() {
			if (!this.username.trim()) {
				this.errorMessage = '请输入用户名';
				return false;
			}
			
			if (this.username.length < 3) {
				this.errorMessage = '用户名至少3个字符';
				return false;
			}
			
			if (!this.password.trim()) {
				this.errorMessage = '请输入密码';
				return false;
			}
			
			if (this.password.length < 6) {
				this.errorMessage = '密码至少6个字符';
				return false;
			}
			
			return true;
		},
		
		// 处理登录
		async handleLogin() {
			if (!this.validateForm()) {
				return;
			}
			
			this.isLoading = true;
			this.clearError();
			
			try {
				// 调用登录云函数
				const result = await uniCloud.callFunction({
					name: 'userLogin',
					data: {
						username: this.username.trim(),
						password: this.password,
						role: this.roles[this.roleIndex].value
					}
				});
				
				console.log('登录结果:', result);
				
				if (result.result.code === 0) {
					// 登录成功
					const { token, userInfo } = result.result.data;
					
					// 保存用户信息到本地
					uni.setStorageSync('token', token);
					uni.setStorageSync('userInfo', userInfo);
					
					// 显示成功提示
					uni.showToast({
						title: '登录成功',
						icon: 'success',
						duration: 1500
					});
					
					// 动态设置tabBar
					if (this.$setTabBar) {
						this.$setTabBar();
					}
					
					// 延迟跳转到首页
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/index/index'
						});
					}, 1500);
					
				} else {
					// 登录失败
					this.errorMessage = result.result.message || '登录失败，请检查用户名和密码';
				}
				
			} catch (error) {
				console.error('登录错误:', error);
				this.errorMessage = '网络错误，请稍后重试';
			} finally {
				this.isLoading = false;
			}
		},
		
		// 跳转到注册页面
		goToRegister() {
			uni.navigateTo({
				url: '/pages/register/register'
			});
		}
	}
}
</script>

<style>
/* 苹果设计风格 - 登录页面 */
.login-container {
	min-height: 100vh;
	background: linear-gradient(135deg, #f5f5dc 0%, #e6ddd4 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40rpx;
	position: relative;
	font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
}

.background-decoration {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: 
		radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
		radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
		radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
	pointer-events: none;
}

.login-card {
	width: 100%;
	max-width: 600rpx;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20rpx);
	border-radius: 32rpx;
	box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.3);
	padding: 60rpx 50rpx;
	position: relative;
	z-index: 1;
}

.login-header {
	text-align: center;
	margin-bottom: 60rpx;
}

.logo-container {
	width: 120rpx;
	height: 120rpx;
	background: linear-gradient(135deg, #34c759 0%, #30d158 100%);
	border-radius: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 24rpx;
	box-shadow: 0 12rpx 40rpx rgba(52, 199, 89, 0.3);
}

.logo-icon {
	font-size: 60rpx;
	color: white;
}

.app-title {
	font-size: 48rpx;
	font-weight: 700;
	color: #1d1d1f;
	display: block;
	margin-bottom: 8rpx;
	letter-spacing: -1rpx;
}

.app-subtitle {
	font-size: 28rpx;
	color: #64748b;
	font-weight: 500;
	display: block;
}

.login-form {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
}

.input-group {
	position: relative;
	display: flex;
	align-items: center;
	background: rgba(248, 250, 252, 0.8);
	border: 2rpx solid rgba(226, 232, 240, 0.6);
	border-radius: 20rpx;
	padding: 24rpx 20rpx;
	transition: all 0.3s ease;
}

.input-group:focus-within {
	border-color: #007aff;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 0 0 6rpx rgba(0, 122, 255, 0.1);
}

.input-icon {
	font-size: 32rpx;
	margin-right: 16rpx;
	color: #64748b;
}

.form-input {
	flex: 1;
	font-size: 32rpx;
	color: #1d1d1f;
	background: transparent;
	border: none;
	outline: none;
}

.form-input::placeholder {
	color: #94a3b8;
}

.password-toggle {
	padding: 8rpx;
	cursor: pointer;
	transition: all 0.3s ease;
}

.toggle-icon {
	font-size: 28rpx;
	color: #64748b;
}

.role-picker {
	flex: 1;
}

.picker-display {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.picker-text {
	font-size: 32rpx;
	color: #1d1d1f;
	flex: 1;
}

.picker-arrow {
	font-size: 24rpx;
	color: #64748b;
	transition: transform 0.3s ease;
}

.error-message {
	display: flex;
	align-items: center;
	gap: 12rpx;
	padding: 20rpx;
	background: rgba(239, 68, 68, 0.1);
	border: 1rpx solid rgba(239, 68, 68, 0.2);
	border-radius: 16rpx;
	margin-top: -8rpx;
}

.error-icon {
	font-size: 28rpx;
}

.error-text {
	font-size: 28rpx;
	color: #dc2626;
	font-weight: 500;
}

.login-btn {
	background: linear-gradient(135deg, #007aff 0%, #5ac8fa 100%);
	color: white;
	border: none;
	border-radius: 20rpx;
	padding: 20rpx 60rpx;
	font-size: 32rpx;
	font-weight: 600;
	box-shadow: 0 12rpx 40rpx rgba(0, 122, 255, 0.3);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	margin-top: 16rpx;
	width: 100%;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.login-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
	transition: left 0.5s ease;
}

.login-btn:active::before {
	left: 100%;
}

.login-btn:active {
	transform: translateY(2rpx);
	box-shadow: 0 6rpx 20rpx rgba(0, 122, 255, 0.2);
}

.login-btn.loading {
	background: linear-gradient(135deg, #94a3b8 0%, #cbd5e1 100%);
	box-shadow: none;
	transform: none;
}

.btn-text {
	color: white;
	font-size: 32rpx;
	font-weight: 600;
}

.register-link {
	text-align: center;
	margin-top: 32rpx;
	padding: 16rpx;
}

.link-text {
	font-size: 28rpx;
	color: #007aff;
	font-weight: 500;
	transition: color 0.3s ease;
}

.register-link:active .link-text {
	color: #0056cc;
}
</style>